<template>
    <div class="account-config">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            账户设置
                        </div>
                    </Col>
                    <!-- <Col :span="4">
                        <div class="back">
                            <span class="back-btn" @click="back">
                                <Icon type="ios-arrow-back" />
                                返回
                            </span>
                            
                        </div>
                    </Col> -->
                </Row>
            </Header>
            <Content class="content">
                <div class="card-add">
                    <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                        <div class="ivu-card-head">
                            <p data-v-57b29fc1="">账户设置</p>
                        </div>
                        <div class="ivu-card-body"> 
                            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" style="width:30%">
                                <FormItem label="用户名" prop="account">
                                    <Input v-model="formValidate.account"></Input>
                                </FormItem>
                                <FormItem label="Email" prop="email">
                                    <Input v-model="formValidate.email"></Input>
                                </FormItem>
                                <FormItem label="旧密码" prop="old_password">
                                    <Input type="password" v-model="formValidate.old_password"></Input>
                                </FormItem>
                                <FormItem label="新密码" prop="new_password">
                                    <Input type="password" v-model="formValidate.new_password"></Input>
                                </FormItem>
                                <FormItem label="确认密码" prop="confirmPassword" class="ivu-form-item-required">
                                    <Input type="password" v-model="formValidate.confirmPassword"></Input>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </div>
            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
    
</template>

<script>
    import userstore from '@/store/SessionStorageStore.js'
    import * as api from '@/api/api'
    export default {
        data(){
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请确认密码'));
                } else if (value !== this.formValidate.new_password) {
                    callback(new Error('两次输入的密码不一致，请重新输入'));
                } else {
                    callback();
                }
            };
            return {
                host: window.location.host,
                loading: this.$store.state,
                formValidate: {
                    account: '',
                    email: '',
                    old_password: '',
                    new_password: '',
                    confirmPassword: '',
                },
                ruleValidate: {
                    account: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请填写邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请填写正确格式的邮箱地址', trigger: 'blur' }
                    ],
                    old_password: [
                        { required: true, message: '请填写旧密码', trigger: 'blur' }
                    ],
                    new_password: [
                        { required: true, message: '请填写新密码', trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ],
                    
                }
            }
        },
        mounted(){
            this.getUserData();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            back() {
                this.$router.back();
            },
            getUserData() {
                let KEY = 'Login';
                let userData = userstore.fetch(KEY);
                this.formValidate.account = userData.account;
                this.formValidate.email = userData.email;
                this.loading.isLoading = false;
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let KEY = 'Login';
                        let userData = userstore.fetch(KEY);
                        let id = userData.id;
                        let body = {
                            model: 'Users',
                            data: this.formValidate,
                            update_condition: {
                                id
                            }
                        };
                        this.loading.isLoading = true;
                        api.createData(body).then(res => {
                            if(res.data.code === 200) {
                                this.loading.isLoading = false;
                                let STORAGE_KEY = "Login";
                                userstore.clear(STORAGE_KEY);
                                this.$confirm('恭喜你，操作成功!请重新登录', '提示', {
                                    showCancelButton: false,
                                    showClose: false,
                                    confirmButtonText: '确定',
                                    type: 'success'
                                }).then(() => {
                                    location.href = '/login.html';
                                }).catch(() => {
                                    location.href = '/login.html';
                                });          
                            }else {
                                this.loading.isLoading = false;
                                this.$Notice.error({
                                    title: '错误',
                                    desc: res.data.msg || '服务器错误'
                                });
                            }
                        }).catch(err => {
                            this.$Notice.error({
                                title: '错误',
                                desc: err
                            });
                        })
                    } else {
                        this.$Message.error('请先完善相关信息');
                    }
                })
            },
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .account-config{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
            .back{
                text-align: right;
                color: #999;
                .back-btn{
                    cursor: pointer;
                    background-color: #fff;
                    padding: 6px 10px;
                    border: 1px solid #ddd;
                }
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .card-add{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-around;
                }
                
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>